<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>01-容器的使用</title>
  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
  <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <header class="col-md-2">
        <div class="logo col-md-12">
          <h1>
            <a href="javascript:;">
              <img src="imgs/logo.png" alt="阿里百秀" class="hidden-xs">
              <h1 class="visible-xs">阿里百秀</h1>
            </a>
          </h1>
        </div>
        <div class="nav col-md-12">
          <ul>
            <li><a href="javascript:;" class="glyphicon glyphicon-camera">生活馆</a></li>
            <li><a href="javascript:;" class="glyphicon glyphicon-leaf">自然汇</a></li>
            <li><a href="javascript:;" class="glyphicon glyphicon-phone">科技湖</a></li>
            <li><a href="javascript:;" class="glyphicon glyphicon-gift">奇趣事</a></li>
            <li><a href="javascript:;" class="glyphicon glyphicon-glass">美食杰</a></li>
          </ul>
        </div>
      </header>
      <article class="col-md-7">
        <div class="banner">
          <div class="banner-img">

          </div>
          <p>阿里百秀</p>
          <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
          </ol>
        </div>
        <div class="news">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="upload/zhuti.png" alt="">
                <p>阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="upload/1.jpg" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="upload/2.jpg" alt="">
                <p>阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="upload/3.jpg" alt="">
                <p>阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="upload/4.jpg" alt="">
                <p>阿里百秀</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="hot clearfix">
          <span>一周热门排行</span>
          <ul>
            <li>
              <a href="javascript:;">
                <h5 class="col-sm-9"><span class="btn btn-danger">1</span>挺漂亮的一款WordPress主题，正版要320元 XIU主题6.0更新内容</h5>
                <p class="col-sm-3 text-muted hidden-xs">
                  <span>阅读(9999)&nbsp;&nbsp;&nbsp;</span>
                  <span class="support glyphicon glyphicon-thumbs-up">赞(999)</span>
                </p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <h5 class="col-sm-9"><span class="btn btn-success">2</span>挺漂亮的一款WordPress主题，正版要320元 XIU主题6.0更新内容</h5>
                <p class="col-sm-3 text-muted  hidden-xs">
                  <span>阅读(9999)&nbsp;&nbsp;&nbsp;</span>
                  <span class="support glyphicon glyphicon-thumbs-up">赞(999)</span>
                </p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <h5 class="col-sm-9"><span class="btn btn-info">3</span>挺漂亮的一款WordPress主题，正版要320元 XIU主题6.0更新内容</h5>
                <p class="col-sm-3 text-muted  hidden-xs">
                  <span>阅读(9999)&nbsp;&nbsp;&nbsp;</span>
                  <span class="support glyphicon glyphicon-thumbs-up">赞(999)</span>
                </p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <h5 class="col-sm-9"><span class="btn btn-default">4</span>挺漂亮的一款WordPress主题，正版要320元 XIU主题6.0更新内容</h5>
                <p class="col-sm-3 text-muted  hidden-xs">
                  <span>阅读(9999)&nbsp;&nbsp;&nbsp;</span>
                  <span class="support glyphicon glyphicon-thumbs-up">赞(999)</span>
                </p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <h5 class="col-sm-9"><span class="btn btn-default">5</span>挺漂亮的一款WordPress主题，正版要320元 XIU主题6.0更新内容</h5>
                <p class="col-sm-3 text-muted  hidden-xs">
                  <span>阅读(9999)&nbsp;&nbsp;&nbsp;</span>
                  <span class="support glyphicon glyphicon-thumbs-up">赞(999)</span>
                </p>
              </a>
            </li>
          </ul>
        </div>
        <div class="post">
          <ul>
            <li>
              <a href="">

              </a>
            </li>
          </ul>
        </div>
      </article>
      <aside class="col-md-3">
        <div class="flag">
          <span>热门主题</span>
          <h3>大前端XIU主题</h3>
          <p>扁平化、简洁风、多设备支持、多功能配置，适用于图片展示站点和个人博客，响应式布局，不同设备不同展示效果...</p>
        </div>
        <div class="search">
          <span>搜索</span>
          <form action="javascript:;">
            <input type="text" class="col-md-9" value="请输入关键字">
            <input type="submit" value="搜索" class="col-md-3 btn btn-danger">
          </form>
        </div>
        <div class="random_hot">
          <span>随机推荐</span>
          <ul>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="title col-md-8">
                  <p>无糖食品真的能减肥?</p>
                  <span>阅读(999)</span>
                </div>
                <div class="img col-md-4">
                  <img src="upload/1.jpg" alt="">
                </div>
              </a>
            </li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>

</html>